<template>
  <div>
    <common-head title="购物车"/>
    <div class="wrap">
      <van-button v-if="!isLogin()">没有登录显示</van-button>
      <van-swipe-cell v-for="(item, index) in items" :key="item.id">
        <div class="item">
            <van-checkbox @click="singleCheck(index)" v-model="item.checked" />
            <van-card
              :num="item.num"
              :price="item.minPrice"
              :title="item.name"
              :thumb="item.pic"
            >
            <template #footer>
              <van-stepper @change="itemNumChange" v-model="item.num"/>
            </template>
          </van-card>
        </div>
         <template #right>
          <van-button
            square text="删除"
            type="danger"
            @click="delItem(index)"
            class="delete-button" />
        </template>
      </van-swipe-cell>
    </div>
    <!-- 提交订单栏 -->
    <van-submit-bar :price="total*100" button-text="提交订单" @submit="onSubmit">
      <van-checkbox @click="allCheckedChange" v-model="allChecked">全选</van-checkbox>
    </van-submit-bar>
    <!-- /提交订单栏 -->
    <my-tabbar/>
  </div>
</template>

<script>
import CommonHead from '@components/CommonHead'
import MyTabbar from '@components/MyTabbar'
import { mapState, mapMutations } from 'vuex'
import { Dialog } from 'vant'
import { isLogin } from '@utils'
export default {
  created () {
    this.calc_total()
  },
  methods: {
    isLogin,
    onSubmit () {
      if (this.isLogin()) {
        // 生成当前订单数据
        /*
        当前订单联系人，应该是联系人列表中
        默认联系人，如果没有默认联系人，列表中第一个联系人
        联系人列表为空 空对象
        */
        const contacts = this.$store.state.contact.contacts
        let contact = {}
        // 联系人列表是否为空s
        if (!contacts.length) {
          contact = {}
        } else {
          // 判断是否有默认联系人
          const index = contacts.findIndex(el => el.isDefault)
          if (index === -1) {
            // 没有默认联系人
            contact = contacts[0]
          } else {
            contact = contacts[index]
          }
        }
        const currentOrder = {
          code: Date.now(), // 订单号 独一无二的
          contact: contact, // 收货人s
          items: this.items.filter(item => item.checked),
          total: this.total,
          status: 0 // 待付款0 待发货1 待收货2 待评价3 已完成4
        }
        this.set_current_order(currentOrder)
        this.$router.push('/order')
      } else {
        // 跳转到登录页去登录
        this.$router.push({
          path: '/login',
          query: {
            from: '/cart'
          }
        })
      }
    },
    allCheckedChange () {
      // 改变全选状态
      this.set_allChecked(!this.allChecked)
      this.set_checked(this.allChecked)
      this.calc_total()
    },
    singleCheck (index) {
      // 切换购买商品的选中状态
      this.item_checked_change({ index, checked: this.items[index].checked })
      /*
      切换单个商品选中状态时，判断是不是所有的商品都选中了，如果选中 全选true
      否则为false
      */
      const allChecked = this.items.every(item => item.checked)
      this.set_allChecked(allChecked)
      this.calc_total()
    },
    itemNumChange () {
      // 点击增加和减少商品购买数量
      console.log(this.items)
      // 调用mutation 改变 vuex中的items
      this.set_items(this.items)
      // 重新计算总价格
      this.calc_total()
    },
    delItem (index) {
      // 删除vuex中的 对应这条商品重新计算总价格
      Dialog.confirm({
        title: '删除商品',
        message: '确认不再想想嘛?'
      })
        .then(() => {
          // on confirm
          this.del_item(index)
          this.calc_total()
        })
    },
    ...mapMutations('cart', ['calc_total', 'set_items', 'del_item', 'item_checked_change', 'set_allChecked', 'set_checked']),
    ...mapMutations('order', ['set_current_order'])
  },
  components: {
    MyTabbar,
    CommonHead
  },
  computed: {
    ...mapState({
      items: state => JSON.parse(JSON.stringify(state.cart.items)),
      total: state => state.cart.total
    }),
    allChecked: {
      get () {
        return this.$store.state.cart.allChecked
      },
      set () {}
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap{
  margin-top:46px;
  margin-bottom: 100px;
   .delete-button {
    height: 100%;
  }
  .item{
    display: flex;
    background: #fafafa;
    /deep/ .van-checkbox__icon{
      margin: 0 5px;
    }
    .van-card{
      flex:1;
    }
  }
}

.van-submit-bar{
  bottom: 50px;
}
</style>
